<template>
	<view class="myAddress">
		<view class="list" v-for="item in addressList" @click="setDefault(item)">
			<view>
				<view class="address">{{item.province+item.city+item.area+item.detail}}</view>
				<view class="info">{{item.name}}&nbsp;&nbsp;{{item.mobile}}</view>
			</view>
			<view class="change">
				<text @click.stop="goto(item)">编辑</text>
				<u-line style="margin: 0 10rpx;" length="26rpx" direction="col"></u-line><text
					@click.stop="clickDel(item.id)">删除</text>
			</view>
			<view class="tips" :style="{backgroundImage: `url(https://xcx.shenbao.shop/bg/mr_${item.isDefault}.png)`}">
				默认</view>
		</view>
		<view class="add">
			<view class="text" @click="navTo('/pages/address/address')">添加新地址</view>
		</view>
		<u-modal v-model="isDel" :content="content" :show-cancel-button="true" :show-title="false"
			confirm-color="#EF253D" @confirm="delSure()"></u-modal>
		<u-empty v-if="addressList.length==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isDel: false,
				content: '确定要删除该地址吗？',
				addressList: [],
				id: '',
				type: ''
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
		},
		onShow() {
			this.showAddressList()
		},
		methods: {
			showAddressList() {
				this.$api.showAddressList().then(res => {
					console.log(res)
					if (res.result == '0') {
						this.addressList = res.data
					}
				})
			},
			// 设置默认地址
			setDefault(e) {
				if (this.type == 1) {
					let params = {
						id: e.id,
						isDefault: 1
					}
					this.$api.editAddressStatus(params).then(res => {
						if (res.result == '0') {
							this.$util.msg('设置成功')
							this.showAddressList()
						} else {
							this.$util.msg(res.resultNote)
						}
					})
				} else {
					uni.$emit('selectAddressId', {
						...e
					})
					this.back()
				}

			},
			delSure() {
				console.log('点击删除', this.id)
				this.$api.deleteAddress({
					id: this.id
				}).then(res => {
					if (res.result == '0') {
						this.$util.msg('删除成功')
						this.showAddressList()
					} else {
						this.$util.msg(res.resultNote)
					}
				})
			},
			goto(item) {
				if (item) {
					this.navTo(`/pages/address/editAddress?item=${JSON.stringify(item)}`)
				}
			},
			clickDel(id) {
				this.isDel = true
				this.id = id
			}
		}
	}
</script>

<style lang="less" scoped>
	.myAddress {
		.list {
			background-color: #fff;
			margin: 20rpx 30rpx 0;
			border-radius: 20rpx;
			padding: 55rpx 29rpx 52rpx 32rpx;
			display: flex;
			justify-content: space-between;
			position: relative;

			.address {
				font-weight: bold;
				color: #333;
				font-size: 30rpx;
			}

			.info {
				margin-top: 21rpx;
				font-size: 26rpx;
				color: #999;
			}

			.change {
				width: 200rpx;
				color: #88888E;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 38rpx;
				right: -24rpx;
			}

			.tips {
				width: 58rpx;
				height: 31rpx;
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: center;
				color: #fff;
				font-size: 18rpx;
				text-align: center;
				line-height: 31rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.add {
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);

			.text {
				width: 600rpx;
				height: 88rpx;
				background: linear-gradient(-90deg, #FB5061, #EF253D);
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #F9F9F9;
				text-align: center;
				line-height: 88rpx;
			}

		}
	}
</style>
